<template>
	<view class="container">
		<!-- 顶部搜索 -->
		<view class="search_box">
			<image src="../../../static/index/search.png" mode="" @click="search"></image>
			<input class="input" type="text" v-model="name" placeholder="请输入企业名称" placeholder-style="font-size:24rpx; color:#999" />
		</view>
		<view class="screen">
			<view class="middle" :class="{'left':type==0}" @click="type=0">推荐</view>
			<!-- <view class="middle distance" :class="{'left':type==1}" @click="type=1">附近</view> -->
			<view class="right" @click="value=true">
				<text>{{cityName}}</text>
				<u-icon name="arrow-down" color="#909090" size="20"></u-icon>
			</view>
		</view>
		<view class="list-box" @click="navTo(item)" v-for="(item,index) in list" :key="index" v-if="list.length>0">
			<image :src="item.imageUrl" mode="aspectFill"></image>
			<view class="list-detail">
				<view  class="list-title">{{item.enterpriseName}}</view>
				<view class="list-num">
					<text>{{item.rangeLow}}-{{item.rangeHigh}}人</text>
					<text>{{item.enterpriseType | ptype}}</text>
				</view>
			</view>
		</view>
		<view v-if="list.length==0" class="noimg">
			<image src="../../../static/noimg/nonews.png" mode=""></image>
		</view>
		<cityselect  v-model="value" @city-change="cityChange" @isshow="value=false"></cityselect>
	</view>
</template>

<script>
	import cityselect from"../../../components/qycity.vue"
	import {fpqy}from "../../../api/index.js"
	export default{
		data(){
			return{
				value:false,
				cityName:"全国",
				cityId:"",
				type:0,
				num:1,
				name:"",
				list:[],
				flag:true
			}
		},
		filters:{
			ptype(val){
				if(val==1){
					return "医疗健康"
				}
				if(val==2){
					return "养殖业"
				}
				if(val==3){
					return "制造业"
				}
			}
		},
		components:{
			cityselect
		},
		onLoad() {
			this.getlist()
		},
		onReachBottom() {
			if(this.flag){
				this.getlist()
			}
		},
		methods:{
			navTo(item){
				uni.navigateTo({
					url:`./product?id=${item.enterpriseId}&name=${item.enterpriseName}`
				})
			},
			// 选择城市
			cityChange(e) {
				console.log(e)
				this.cityName=e.name
				this.cityId=e.regionId
				this.list=[]
				this.num=1
				this.flag=true
				this.getlist()
			},
			search(){
				this.list=[]
				this.num=1
				this.flag=true
				this.getlist()
			},
			async getlist(){
				uni.showLoading({
					title:'加载中...'
				})
				let data={pageNum:this.num,pageSize:10}
				if(this.name.trim()!=''){
					data.poorName=this.name
				}
				if(this.cityId!=''){
					data.cityId=this.cityId
				}
				this.num++
				let res=await this.get(fpqy,data)
				if(res.data.length<10){
					this.flag=false
				}
				this.list=[...this.list,...res.data]
			}
		}
	}
</script>

<style lang="less">
	.noimg{
		width:690rpx;
		height: 70vh;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 300rpx;
			height: 400rpx;
		}
	}
	.container{
		// padding: 0 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 140rpx;
	}
	.search_box{
		width: 750rpx;
		height: 60rpx;
		position: fixed;
		left: 0;
		top:0;
		z-index: 99;
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		display: flex;
		align-items: center;
		border-radius: 29rpx;
		background-color: #FFFFFF;
		justify-content: center;
		z-index: 99;
		image{
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			right: 50rpx;
			z-index: 999;
		}
	}
	.input{
		width:690rpx;
		height: 50rpx;
		border: 1px solid #F09238;
		border-radius: 40rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
	}
	.screen{
		width: 750rpx;
		position: fixed;
		left: 0;
		display: flex;
		align-items: center;
		height: 60rpx;
		padding-left: 40rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		top:50 ;
		z-index: 99;
		/* #ifdef H5 */
		top: 146rpx;
		/* #endif */
	}
	.middle{
		font-size: 24rpx;
		color: #999999;
	}
	.left{
		font-size: 28rpx;
		color: #F09238;
	}
	.right{
		font-size: 24rpx;
		color: #999999;
		position: absolute;
		right: 30rpx;
		text{
			margin-right: 10rpx;
		}
	}
	.distance{
		margin-left: 40rpx;
	}
	.list-box{
		width: 690rpx;
		height: 266rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx rgba(0, 0, 0, 0.16);
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		image{
			width: 282rpx;
			height: 206rpx;
		}
	}
	.list-detail{
		width: 350rpx;
		height: 100%;
		margin-left: 20rpx;
	}
	.list-title{
		font-size: 28rpx;
		color: #333333;
		overflow: hidden;  
		text-overflow: ellipsis;  
		display: -webkit-box;  
		-webkit-line-clamp: 2;  
		-webkit-box-orient: vertical; 
	}
	.list-num{
		margin-top: 44rpx;
		font-size: 28rpx;
		color: #333333;
	}
	.list-num :nth-child(2){
		font-weight: bold;
		margin-left: 50rpx;
	}
</style>
